import React, { Component } from 'react';
import { Input, Button, InputNumber, Form, Modal } from 'antd';
import styles from './ChargeManage.less'
import { connect } from 'dva'
const FormItem = Form.Item;

@connect(({ login }) => ({
  login
}))
class Raward extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isEdit: true,
    }
  }

  onHandleSave = () => {
    const { validateFields, getFieldsValue } = this.props.form
    const { rewardItem } = this.props
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
        id: rewardItem && rewardItem.id
      };

      Modal.confirm({
        title: '确定要修改此项目?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.setState({ isEdit: true })
          this.props.onRewardOk && this.props.onRewardOk(data);
        },
      });
    });
  }

  onHandleRevise = () => {
    this.setState({ isEdit: false })
  }


  render() {
    const { getFieldDecorator } = this.props.form
    const { rewardItem } = this.props
    const { isEdit } = this.state
    const { isAdmin } = this.props.login
    return (
      <div className={styles.ChargeManage}>
        <Form>
          <ul>
            <li>
              <ul>
                <li style={{ paddingRight: "20px", marginTop: '-5px' }}><span>奖励比例  </span></li>
                <li>
                  <FormItem >
                    {getFieldDecorator('rewardRatio', {
                      initialValue: rewardItem && rewardItem.rewardRatio,
                    })(
                      <InputNumber disabled={isEdit} min={0} max={10} />
                    )}
                  </FormItem>
                </li>
                <li style={{ marginTop: '-5px' }}><span>‰</span></li>
              </ul>
            </li>
            <li style={{ height: '30px' }}>
              <ul>
                <li ><span>活动规则</span></li>
                <li>
                  <FormItem >
                    {getFieldDecorator('activityRules', {
                      initialValue: rewardItem && rewardItem.activityRules,
                    })(
                      <Input maxLength="60" disabled={isEdit} style={{ width: '500px' }} />
                    )}
                  </FormItem>
                </li>
              </ul>
              <ul>
                <li style={{ paddingLeft: '85px' }}> </li>
              </ul>
            </li>
          </ul>
        </Form>
        {isAdmin ? <Button type="primary" ghost onClick={isEdit ? this.onHandleRevise : this.onHandleSave}>{isEdit ? "编辑" : "保存"}</Button> : <div></div>}
      </div>
    );
  }
}

export default Form.create()(Raward);

